﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title>叩丁狼CRM(演示版)</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" href="/css/core.css"/>
</head>
<body>
<#assign menu="employee"/>
<div class="container " style="margin-top: 20px">
    <#include "../common/welcome.ftl"/>
    <div class="row">
        <#include "../common/menu.ftl"/>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">员工编辑</h1>
                </div>
            </div>
            <div class="row col-sm-10">
                <form class="form-horizontal" action="/employee/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id" value="${(entity.id)!}">
                    <div class="form-group" >
                        <label class="col-sm-2 control-label">用户名：</label>
                        <div class="col-sm-6">
                        <input type="text" class="form-control" name="name" value="${(entity.name)!}" placeholder="请输入用户名">
                        </div>
                    </div>

                    <#if !entity??>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-6">
                            <input type="password" class="form-control" name="password" id="password"  placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">验证密码：</label>
                            <div class="col-sm-6">
                            <input type="password" class="form-control" id="repassword" name="repassword" placeholder="再输入一遍密码">
                            </div>
                        </div>
                    </#if>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email：</label>
                        <div class="col-sm-6">
                        <input type="text" class="form-control" name="email" value="${(entity.email)!}" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄：</label>
                        <div class="col-sm-6">
                        <input type="text" class="form-control" name="age" value="${(entity.age)!}" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dept" class="col-sm-2 control-label">部门：</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="dept" name="department.id">
                                <#list departmentList as d>
                                    <option value="${d.id}">${d.name}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">超级管理员：</label>
                        <label class="checkbox-inline" style="margin-left: 15px;">
                            <input type="checkbox" id="admin" name="admin" >
                        </label>
                    </div>
                    <div class="form-group" id="role">
                        <div>
                            <label for="role" class="control-label" style="margin-left: 60px">分配角色：</label>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-4 col-sm-offset-1">
                                <select multiple class="form-control allSelect" size="15">
                                        <#list roleList as r>
                                            <option value="${r.id}">${r.name}</option>
                                        </#list>
                                </select>
                            </div>
                            <div class="col-sm-2" style="margin-top: 60px;" align="center">
                                <div >
                                    <a type="button" class="btn btn-info  "  style="margin-top: 10px"
                                       onclick="moveSelected('allSelect', 'selfSelect')">&nbsp;&gt;&nbsp;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveSelected('selfSelect', 'allSelect')">&nbsp;&lt;&nbsp;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveAll('allSelect', 'selfSelect')">&gt;&gt;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveAll('selfSelect', 'allSelect')">&lt;&lt;</a>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <select multiple class="form-control selfSelect" size="15" name="ids">
                                    <#if entity??>
                                        <#list entity.roles as r>
                                                <option value="${r.id}">${r.name}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-1 col-sm-6">
                            <button id="btn_submit" type="button" class="btn btn-default">保存</button>
                            <button type="reset" class="btn btn-default">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

    <script>
            $(function () {
                //部门回显
                $("#dept").val(${(entity.department.id)!});
                var role;

                <#if entity??>
                    //只读
                    $("#editForm input[name='name']").attr("readonly",true);
                    <#if entity.admin>
                        $("#admin").prop("checked",true);
                        role = $("#role").detach();
                    </#if>
                </#if>

                //超级管理员与角色的互斥
                $("#admin").click(function () {
                    if(this.checked){
                        role = $("#role").detach();
                    }else{
                        $(this).closest("div").after(role);
                    }
                });

            });

            //表单验证
            $("#editForm").validate({
                rules:{
                    <#if !entity??>
                    name:{
                        required:true,
                        rangelength:[2,5],
                        remote:"/employee/checkUsername.do"
                    },
                    </#if>
                    password:{
                        required:true,
                        rangelength:[1,2]
                    },
                    repassword:{
                        required:true,
                        equalTo:"#password"
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    age:{
                        digits:true,
                        range:[16,65]
                    }

                }
            });
    </script>
    <#include "../common/mycode.ftl"/>
</body>
</html>